{include file="public/header,public/nav,public/fixbar" title="商品列表-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-main margin-bottom-10">
            <div class="layui-row">
                <div class="goods-category-select">
                    <div class="category-list">
                        <div id="first-category">
                            <a class="layui-btn layui-btn-primary first-category layui-this" data-firstid="0">全部</a>
                            {foreach $first_category as $key => $v}
                            <a class="layui-btn layui-btn-primary first-category" href="javascript:;" data-firstid="{$v.id}">{$v.name}</a>
                            {/foreach}
                        </div>
                    </div>
                    <div class="category-list">
                        <div class="second-category-list" id="second-category">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-main min-height-65vh">
            <div class="layui-row">
                <div class="layui-col-space25" id="product-list">
                    
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','element'], function(){
        var $ = layui.jquery, flow = layui.flow, element = layui.element;

        $(function(){
            loadList();  // 加载列表
        })

        // 绑定自定义的 tab 元素
        element.tab({
            headerElem: '#first-category>.layui-btn',
        });
        element.tab({
            headerElem: '#second-category>.layui-btn',
        });
        
        // 点击一级分类获取二级分类
        $(".first-category").click(function(){
            var firstid = $(this).data('firstid');

            $('#product-list').html('');
            $(".second-category-list").html('');
            if (firstid == 0) { // 全部
                loadList(); // 加载列表
            } else {
                loadList(firstid, 1); // 加载列表
                // $(".second-category-list").html('<div style="text-align: center;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon " style="font-size: 30px;">&#xe63d;</i></div>');
                $.ajax({
                    type: "post",
                    dataType: "json",
                    data: {'p_id': firstid},//请求的页码和每页显示条数
                    url: '/course/get_second_category',
                    success: function (res) {
                        if (res.code == 0) {
                            var newsHtml = '';
                            layui.each(res.data, function(index, item){
                                newsHtml += `<a class="layui-btn layui-btn-primary second-category" href="javascript:;" data-secondid="${item.id}">${item.name}</a>`;
                            })
                            $(".second-category-list").html(newsHtml);
                        } else {
                            $(".second-category-list").html('');
                        }
                    }
                });
            }
        })

        $(document).on('click','.second-category',function(){
            var category_id = $(this).data('secondid');
            $('#product-list').html('');
            loadList(category_id, 2); // 加载列表
        });

        // 分页加载列表
        function loadList(category_id='', cate_level){
            var limit = 20;//每次请求的条数
            flow.load({
                elem: '#product-list' //指定列表容器
                ,scrollElem: ''//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'category_id':category_id, 'cate_level':cate_level},//请求的页码和每页显示条数
                        url: '/goods/index',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        var tags = '';
                                        if (item.tags) {
                                            tags = ` <div class="product-tag">
                                                            ${item.tags}
                                                        </div>`;
                                        }
                                        var price = '<p class="product-price">免费</p>';
                                        if (item.sale_price > 0) {
                                            price = `<p class="product-price"><span class="symbol">￥</span>${item.sale_price}</p>`;
                                        }
                                        newsHtml += `<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
                                                        <a href="/goods/detail?id=${item.id}">
                                                            <div class="layui-card product-item">
                                                                <div class="layui-card-body">
                                                                    <div class="goods-cover">
                                                                        <img src="${item.head_imgs}">
                                                                    </div>
                                                                    <div class="detail height-80">
                                                                        <div class="product-title layui-ellips">
                                                                            ${item.name}
                                                                        </div>
                                                                        ${tags}
                                                                    </div>
                                                                </div>
                                                                <div class="layui-card-footer">
                                                                    <p class="text">已售 <b>${item.virtual_sales+item.real_sales}</b></p>
                                                                    ${price}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>`;
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#product-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_search.png"><p>暂无相关数据~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }
    });
</script>